<<<<<<< HEAD
/*
 *@description: 栏目管理
 *@Author:@reynold
 *@Date:2025-03-22 11:01:32
 *@Update:2025-03-22 11:01:32
 *@Version: V1.0.0
*/
<template>
  <Card>
    <div class="box">
      <div class="box_top">
        <el-button size="mini" @click="addCate">添加</el-button>
      </div>
      <div class="box_bottom">
        <!-- 表格 -->
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column type="index" :index="initIndex()" label="序号" width="100"></el-table-column>
          <el-table-column
            prop="cateName"
            label="栏目编号">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            label="图标">
            <template slot-scope="scope">
              <img :src="scope.row.icon" alt="">
            </template>
          </el-table-column>
          <el-table-column
            prop="sortId"
            label="排序号">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button class="columnBtn1" type="text" size="small" @click="showCate(scope.row)">查看</el-button>
              <el-button class="columnBtn2" type="text" size="small" @click="showPop(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 抽屉 -->
        <el-drawer
          title="添加栏目"
          :visible.sync="drawer">
          <div class="demo-drawer__content">
            <el-form :model="drawerForm" :rules="rules">
              <el-form-item label="名称" prop="name" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
              <el-button @click="cancelForm">取 消</el-button>
              <el-button type="primary" @click="handlesubmit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
            </div>
          </div>
        </el-drawer>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageQuery.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

        <!-- 详细信息dialog -->
        <el-dialog title="详细信息" :visible.sync="dialogTableVisible">
          <el-table :data="gridData">
            <el-table-column property="id" label="栏目id" width="150"></el-table-column>
            <el-table-column property="cateName" label="栏目编号"></el-table-column>
            <el-table-column property="name" label="名称"></el-table-column>
            <el-table-column label="图标">
              <template slot-scope="scope">
                <img :src="scope.row.icon" alt="">
              </template>
            </el-table-column>
            <el-table-column property="sortId" label="排序号"></el-table-column>
            <el-table-column property="date" label="时间" width="200"></el-table-column>
          </el-table>
        </el-dialog>
        <!-- 提示删除栏目的dialog -->
        <el-dialog
          title="删除栏目"
          :visible.sync="dialogVisible"
          width="30%">
          <span>确认要删除此栏目吗</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="delCate">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card/index.vue'
import instance from '@/utils/instance.js'
import utils from '@/utils/utils.js'
export default {
  data(){
    return {
      tableData: [],
      pageQuery:{
        pageSize:10,
        pageNum:1
      },
      total:100,
      drawer: false,
      drawerForm:{
        name:''
      },
      formLabelWidth: '80px',
      loading: false,
      drawerTitle:'添加栏目',
      dialogTableVisible:false,
      // 提示删除的变量
      dialogVisible:false,
      cateId:0,
      gridData:[
      ],
      //添加栏目规则
      rules:{
         name: [
            { required: true, message: '请输入栏目名称', trigger: 'blur' },
            { min: 3, max: 7, message: '长度在 3 到 7 个字符', trigger: 'blur' }
          ]
      }
    }
  },
  methods:{
    // 初始序号
    initIndex(){
      return (this.pageQuery.pageNum - 1) * this.pageQuery.pageSize + 1
    },
    // 分页的方法
    handleSizeChange(val){
      this.pageQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val){
      this.pageQuery.pageNum = val
      this.getList()
    },
    // 打开抽屉
    addCate(){
      this.drawer = true
    },
    // 取消抽屉
    cancelForm(){
      this.drawer = false
    },
    // 添加栏目
    handlesubmit(){
      // 提交表单的时候应该把drawerForm的数据发送给后台
      this.$confirm('确定要栏目吗')
        .then(_ => {
          this.loading = true;
          // 提交数据
          instance.post('/category/add',this.drawerForm).then(res=>{
            if(res.data.status == 2001){
              utils.showWarning(res.data.message)
            }
            else{
              utils.showSuccess(res.data.message)
              this.getList()
            }
          })
          // 提交完数据之后关闭抽屉
          this.loading = false
          this.drawer = false
          this.drawerForm.name = ''
        })
        .catch(_ => {});
    },
    // 展示确认删除框
    showPop(scope){
      this.dialogVisible = true
      this.cateId = scope.id
    },
    // 确认删除栏目的方法
    delCate(){
      console.log(this.cateId);
      instance.post('/category/del',this.cateId).then(res=>{
        utils.showSuccess(res.data.message)
        this.getList()
      })
      this.dialogVisible = false
    },
    // 分页获取table数据
    getList(){
      instance.post('/category/list',this.pageQuery).then(res=>{
        this.tableData = res.data.data.list
        this.total = res.data.data.total
      })
    },
    // 查看数据详情
    showCate(scope){
      console.log(scope);
      this.gridData = []
      this.gridData.push(scope)
      this.dialogTableVisible = true
    }
  },
  created(){
    this.getList()
  },
  components:{
    Card
  }
}
</script>

<style lang="less" scoped>
.box{
  .box_top{
    .el-button--mini{
      color: #fff;
      background-color: #188b8f;
      border: none;
    }
  }
  .box_bottom{
    .tiltle{
      margin: 10px;
      font-size: 16px;
      font-weight: 600;
    }
    .demo-drawer__content{
      form{
        height: 80vh;
      }
      .demo-drawer__footer{
        float: right;
        margin-right: 15px;
      }
    }
    .columnBtn1{
      color: #188b8f;
    }
    .columnBtn2{
      color: rgb(236, 65, 65);
    }
    // 分页样式
    .el-pagination{
      float: right;
    }
  }
}
.el-color-picker__icon, .el-input, .el-textarea{
  width: 300px;
=======
<template>
  <div class="container">
    <div class="header">
      <el-button type="primary" @click="handleAdd">添加</el-button>
    </div>
    
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa', color: '#333' }"
    >
      <el-table-column prop="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="categoryCode" label="栏目编号" width="180"></el-table-column>
      <el-table-column prop="name" label="名称" width="180"></el-table-column>
      <el-table-column label="图标" width="100">
        <template slot-scope="scope">
          <i :class="scope.row.icon" style="color: #409eff;"></i>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序号" width="100"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 添加对话框 -->
    <el-dialog title="添加栏目" :visible.sync="addDialogVisible" width="30%">
      <el-form :model="addForm" ref="addForm" label-width="100px">
        <el-form-item label="栏目编号">
          <el-input v-model="addForm.categoryCode"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="addForm.icon" placeholder="例如：iconfont icon-name"></el-input>
        </el-form-item>
        <el-form-item label="排序号">
          <el-input-number v-model="addForm.sort" :min="1"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAdd">确定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑栏目" :visible.sync="editDialogVisible" width="30%">
      <el-form :model="editForm" ref="editForm" label-width="100px">
        <el-form-item label="栏目编号">
          <el-input v-model="editForm.categoryCode"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="editForm.icon" placeholder="例如：iconfont icon-name"></el-input>
        </el-form-item>
        <el-form-item label="排序号">
          <el-input-number v-model="editForm.sort" :min="1"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      addDialogVisible: false,
      editDialogVisible: false,
      addForm: {
        categoryCode: '',
        name: '',
        icon: '',
        sort: 1
      },
      editForm: {
        index: null,
        categoryCode: '',
        name: '',
        icon: '',
        sort: 1
      }
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 从 localStorage 加载数据
      const savedData = localStorage.getItem('categoryData');
      if (savedData) {
        this.tableData = JSON.parse(savedData);
      } else {
        // 默认数据
        this.tableData = [
          {
            index: 1,
            categoryCode: "C001",
            name: "家居清洁",
            icon: "iconfont icon-jiajuqingji",
            sort: 1
          },
          {
            index: 2,
            categoryCode: "C002",
            name: "家电维修",
            icon: "iconfont icon-jiazhengfuwu",
            sort: 2
          },
          {
            index: 3,
            categoryCode: "C003",
            name: "保姆服务",
            icon: "iconfont icon-nanny",
            sort: 3
          },
          {
            index: 4,
            categoryCode: "C004",
            name: "月嫂服务",
            icon: "iconfont icon-moon",
            sort: 4
          }
        ];
        localStorage.setItem('categoryData', JSON.stringify(this.tableData));
      }
      this.total = this.tableData.length;
    },
    handleAdd() {
      this.addDialogVisible = true;
      this.addForm = {
        categoryCode: '',
        name: '',
        icon: '',
        sort: 1
      };
    },
    confirmAdd() {
      if (!this.addForm.categoryCode || !this.addForm.name) {
        this.$message.error('请填写必填字段');
        return;
      }
      // 生成新的索引
      const newIndex = this.tableData.length > 0 ? Math.max(...this.tableData.map(item => item.index)) + 1 : 1;
      const newData = {
        index: newIndex,
        categoryCode: this.addForm.categoryCode,
        name: this.addForm.name,
        icon: this.addForm.icon,
        sort: this.addForm.sort
      };
      this.tableData.push(newData);
      localStorage.setItem('categoryData', JSON.stringify(this.tableData));
      this.addDialogVisible = false;
      this.total = this.tableData.length;
      this.$message.success('添加成功');
    },
    handleEdit(index, row) {
      this.editDialogVisible = true;
      this.editForm = { ...row, index };
    },
    confirmEdit() {
      if (!this.editForm.categoryCode || !this.editForm.name) {
        this.$message.error('请填写必填字段');
        return;
      }
      const index = this.editForm.index;
      const updatedData = {
        index,
        categoryCode: this.editForm.categoryCode,
        name: this.editForm.name,
        icon: this.editForm.icon,
        sort: this.editForm.sort
      };
      const idx = this.tableData.findIndex(item => item.index === index);
      if (idx !== -1) {
        this.tableData[idx] = updatedData;
        localStorage.setItem('categoryData', JSON.stringify(this.tableData));
        this.editDialogVisible = false;
        this.$message.success('编辑成功');
      }
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const idx = this.tableData.findIndex(item => item.index === row.index);
        if (idx !== -1) {
          this.tableData.splice(idx, 1);
          localStorage.setItem('categoryData', JSON.stringify(this.tableData));
          this.total = this.tableData.length;
          this.$message.success('删除成功');
        }
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.iconfont {
  font-size: 16px;
  color: #409eff;
>>>>>>> 76b7211 (提交)
}
</style>